<template>
	<view class="ranking">
		<image class="ranking-bg" src="../../static/images/ranking/ranking_bg.jpg"></image>
		<view class="ranking-list">
			<view class="ranking-list-my flex">
				<text class="ranking-list-my-text">我的成绩</text>
				<image class="ranking-list-my-head" src="../../static/icons/agent_jewel/agent_i2.png"></image>
				<text class="ranking-list-my-name f-one-ellipsis">蕉仔</text>
				<text class="ranking-list-my-rank">第20名</text>
				<text class="ranking-list-my-count">1人</text>
			</view>
			<view class="ranking-list-cont">
				<view class="ranking-list-cont-head flex">
					<text>排名</text>
					<text>昵称</text>
					<text>推荐人数</text>
				</view>
				<view class="ranking-list-cont-item flex" v-for="(item,index) in data" :key="index">
					<view class="ranking-list-cont-item-rank">
						<block v-if="index == 0">
							<image class="ranking-list-cont-item-rank-medal" src="../../static/images/ranking/no1.png"></image>
						</block>
						<block v-if="index == 1">
							<image class="ranking-list-cont-item-rank-medal" src="../../static/images/ranking/no2.png"></image>
						</block>
						<block v-if="index == 2">
							<image class="ranking-list-cont-item-rank-medal" src="../../static/images/ranking/no3.png"></image>
						</block>
						<block v-if="index > 2">
							{{index+1}}
						</block>
					</view>
					<view class="ranking-list-cont-item-name">{{item.name}}</view>
					<view class="ranking-list-cont-item-num">{{item.cont}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[
					{
						rank:1,
						name:'小陈',
						cont:1
					},
					{
						rank:2,
						name:'陈哥',
						cont:15
					},
					{
						rank:3,
						name:'小陈',
						cont:20
					},
					{
						rank:4,
						name:'小陈',
						cont:10
					}
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ed204a;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.ranking{
		background-color: #ed204a;
		&-bg{
			width: 750rpx;
			height: 582rpx;
		}
		&-list{
			margin: 0 auto;
			width: 640rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding-top: 48rpx;
			&-my{
				width: 560rpx;
				height: 100rpx;
				margin: 0 auto;
				border-radius: 10rpx;
				box-shadow:0px 0px 9rpx rgba(120,120,120,0.2);
				&-text{
					width: 65rpx;
					color: #d71511;
					font-size: 30rpx;
					padding: 0 35rpx;
				}
				&-head{
					width: 62rpx;
					height: 62rpx;
				}
				&-name{
					font-size: 32rpx;
					padding-left: 16rpx;
					width: 140rpx;
				}
				&-rank{
					font-size: 32rpx;
					color: #d71511;
					border-right: 1px solid #f2f2f2;
					padding-right: 22rpx;
					margin-right: 22rpx;
				}
				&-count{
					font-size: 32rpx;
					color: #d71511;
				}
			}
			&-cont{
				padding-bottom: 50rpx;
				&-head{
					justify-content: center;
					margin-top: 30rpx;
					line-height: 70rpx;
					border-bottom: 1px solid #f5f5f5;
					text{
						flex: 1;
						color: #666666;
						font-size: 30rpx;
						text-align: center;
					}
				}
				&-item{
					font-size: 34rpx;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					position: relative;
					&::after{
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						width: 580rpx;
						margin-left: -290rpx;
						height: 1px;
						background-color: #f5f5f5;
					}
					view{
						width: 33.33%;
						text-align: center;
					}
					&-rank{
						color: #5c5c5c;
						&-medal{
							width: 63rpx;
							height: 53rpx;
							display: block;
							margin: 0 auto;
						}
					}
				}
			}
		}
	}
</style>
